<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
  -->

<ngx-graph
  #graph
  class="chart-container"
  [view]="[(graph.graphDims.width * 2) / 3, graph.graphDims.height]"
  [links]="data.links"
  [nodes]="data.nodes"
  [curve]="curve"
  orientation="TB"
  [autoZoom]="false"
  [panningEnabled]="false"
  [draggingEnabled]="false"
  [minZoomLevel]="1"
  [maxZoomLevel]="1"
>
  <ng-template #defsTemplate>
    <svg:marker
      id="arrow"
      viewBox="0 -5 10 10"
      refX="8"
      refY="0"
      markerWidth="4"
      markerHeight="4"
      orient="auto"
    >
      <svg:path d="M0,-5L10,0L0,5" class="arrow-head" />
    </svg:marker>
  </ng-template>

  <ng-template #nodeTemplate let-node>
    <svg:g
      class="node"
      ngx-tooltip
      [tooltipPlacement]="'top'"
      [tooltipType]="'tooltip'"
      [tooltipTitle]="node.description"
    >
      <svg:rect
        [attr.width]="node.width"
        [attr.height]="node.height"
        [attr.fill]="node.options.color"
      />
      <svg:text
        alignment-baseline="central"
        [attr.x]="10"
        [attr.y]="node.height / 2"
      >
        {{ node.label }}
      </svg:text>
      <svg:text
        alignment-baseline="hanging"
        [attr.x]="node.width - 100"
        [attr.y]="node.height + 10"
        [ngClass]="'state-default state-' + node.state"
      >
        {{ node.state }}
      </svg:text>
    </svg:g>
  </ng-template>

  <ng-template #linkTemplate let-link>
    <svg:g class="edge">
      <svg:path
        class="line"
        stroke-width="2"
        marker-end="url(#arrow)"
      ></svg:path>
      <svg:text class="edge-label" text-anchor="middle">
        <textPath
          class="text-path"
          [attr.href]="'#' + link.id"
          [style.dominant-baseline]="link.dominantBaseline"
          startOffset="50%"
        >
          {{ link.label }}
        </textPath>
      </svg:text>
    </svg:g>
  </ng-template>
</ngx-graph>
